{% extends 'base.html'%}

{% block content %}
<html>
<head>
<script type="text/javascript" src="/my-media/js/jquery.js"></script>
<script type="text/javascript" src="/my-media/js/jquery.innerfade.js"></script>
<script type="text/javascript" src="/my-media/js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});
</script>
</head>
<body>
welcome to the home page
{% if user.is_authenticated %}
 
<a  href="/users/profile"><b onmouseout="this.style.color = 'black';" onmouseover="this.style.color = '#0BB359';" align="justify">view your profile here</b></a>
Hello user : {{user}}

{%endif%}

<ul class="tabs">
    <li><a href="#tab1">Introduction</a></li>
    <li><a href="#tab2">register</a></li>
{% if user.is_authenticated %}
<li><a href="#tab4">logout</a></li>
{%else%}
<li><a href="#tab3">login</a></li>
{%endif%}
     
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
    
       <img src="/my-media/thumbnails/xmlimg4.jpg" alt="the social stock market" /> <!--Content-->
       <b color = '#0BB359';>Welcome to Social Stock Market</b>
       <p>We help to build a social network for self-investors and provide the latest information</p>
       <br></br>
       <p>You can be inspired by the investment ideas from your friends and give your opinions to your friends</p>
       <br></br>
       <p>We promise that all data is private , secure and anonymous </p>
    </div>
    <div id="tab2" class="tab_content">
       <img src="/my-media/thumbnails/xmlimg1.jpg"  /> 
        <b color = '#0BB359';><p>Welcome to Social Stock Market</p></b>
        <p>you can register from here</p>
        <a href="/users/register/"  class="current"><b onmouseout="this.style.color = 'black';" onmouseover="this.style.color = '#0BB359';" align="justify">Register</b></a><!--Content-->
    </div>
        <div id="tab3" class="tab_content">
       <img src="/my-media/thumbnails/xmlimg2.jpg" a /> <!--Content-->
    <b color = '#0BB359';><p>Welcome to Social Stock Market</p></b>
    <p>you can login from here</p>
        <a href="/users/login/"  class="current"><b onmouseout="this.style.color = 'black';" onmouseover="this.style.color = '#0BB359';" align="justify">Login</b></a>
    
    </div>
            <div id="tab4" class="tab_content">
       <img src="/my-media/thumbnails/xmlimg2.jpg" /> <!--Content-->
    <b color = '#0BB359';><p>Welcome to Social Stock Market</p></b>
    <p>you can logout from here</p>
        <a href="/users/logout/"  class="current"><b onmouseout="this.style.color = 'black';" onmouseover="this.style.color = '#0BB359';" align="justify">Logout</b></a>
    
    </div>
</div>

</body>
</html>
{%endblock%}

